/**
 * @Author: wu.hongmei
 * @Date: 2018-09-05
 */
import React, { Component } from "react";
import { connect } from "dva";
import { Button, Row, Col, Card, Select } from "antd";
import Icon from "@cbd/icon";
import { Pie, Line } from "../../../components/Charts";
import styles from "./Personas.less";

const { Option } = Select;
const { Meta } = Card;
const mockNews = {
  pushData: "942.1w",
  viewData: "252.5w",
  viewRata: "33.5%",
  usedNews: "33.5%"
};

@connect(({ chart, home }) => ({
  chart,
  loading: false,
  homeData: home
}))
export default class Personas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "chart/fetch"
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: "chart/clear"
    });
  }

  renderNews = () => (
    <div className={styles.news}>
      <Row>
        <Col span={6}>
          <div className={styles.card}>
            <Meta
              avatar={
                <div className={styles.metaIcon}>
                  <Icon type="relation" />
                </div>
              }
              title="推送消息数"
              description={mockNews.pushData}
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.card}>
            <Meta
              avatar={
                <div
                  className={styles.metaIcon}
                  style={{ background: "#8CD05B" }}
                >
                  <Icon type="eye" />
                </div>
              }
              title="查看消息数"
              description={mockNews.pushData}
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.card}>
            <Meta
              avatar={
                <Pie
                  animate={false}
                  color="#7882FF"
                  inner={0.7}
                  tooltip={false}
                  margin={[0, 0, 0, 0]}
                  percent={mockNews.viewRata}
                  height={86}
                />
              }
              title="消息查看率"
              description={mockNews.viewRata}
            />
          </div>
        </Col>
        <Col span={6}>
          <div className={styles.card}>
            <Meta
              avatar={
                <Pie
                  animate={false}
                  color="#245BDB"
                  inner={0.7}
                  tooltip={false}
                  margin={[0, 0, 0, 0]}
                  percent={mockNews.usedNews}
                  height={86}
                />
              }
              title="消息有帮助率"
              description={mockNews.usedNews}
            />
          </div>
        </Col>
      </Row>
    </div>
  );

  render() {
    const { loading, chart } = this.props;
    const { LineData, salesTypeData } = chart;
    return (
      <div className={styles.root}>
        <div className={styles.header}>
          <div className={styles.title}>用户画像</div>
          <div className={styles.search}>
            <div className={styles.searchContent}>
              <label>应用名称：</label>
              <Select
                defaultValue="lucy"
                style={{ width: 240 }}
                onChange={this.onChange}
              >
                <Option value="jack">选择一</Option>
                <Option value="lucy">选择二</Option>
                <Option value="Yiminghe">选择三</Option>
              </Select>
            </div>
            <Button type="primary">导出用户画像</Button>
          </div>
        </div>
        <div className={styles.content}>
          <Row gutter={24}>
            <Col xl={24}>
              <div className={styles.card}>{this.renderNews()}</div>
            </Col>
            <Col xl={12} lg={12} md={12} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="各类用户日均使用时长"
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
              >
                <h4 style={{ marginTop: 8, marginBottom: 32 }}>图标标题</h4>
                <Pie
                  hasLegend
                  subTitle="用户使用日均总时长"
                  //  total={salesTypeData}
                  data={salesTypeData}
                  height={248}
                  lineWidth={4}
                />
              </Card>
            </Col>
            <Col xl={12} lg={12} md={12} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="应用使用时长"
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
              >
                <h4 style={{ marginTop: 8, marginBottom: 32 }}>图标标题</h4>
                <Pie
                  hasLegend
                  subTitle="用户量"
                  // total={salesTypeData}
                  data={salesTypeData}
                  height={248}
                  lineWidth={4}
                />
              </Card>
            </Col>
            <Col xl={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="应用使用习惯"
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
              >
                <h4 style={{ marginTop: 8, marginBottom: 32 }}>平均访问量</h4>
                <Line data={LineData} height={248} />
              </Card>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
